import React, { useState, useRef } from 'react'
import ParkingMap from './ParkingMap'
import ControlPanel from './ControlPanel'

export default function ParkingSystem() {
  const [slots, setSlots] = useState([
    { id: 'A1', x: 100, y: 100, occupied: false },
    { id: 'A2', x: 200, y: 100, occupied: true },
    { id: 'B1', x: 100, y: 200, occupied: false },
  ])
  const [guides, setGuides] = useState([])
  const [drawingMode, setDrawingMode] = useState(false)
  const [startPos, setStartPos] = useState(null)
  const canvasRef = useRef(null)

  const handleCanvasClick = (e) => {
    const rect = canvasRef.current.getBoundingClientRect()
    const clickPos = {
      x: e.clientX - rect.left,
      y: e.clientY - rect.top,
    }

    if (drawingMode) {
      setGuides([
        ...guides,
        {
          id: `guide_${Date.now()}`,
          start: startPos,
          end: clickPos,
        },
      ])
      setDrawingMode(false)
    } else {
      setStartPos(clickPos)
      setDrawingMode(true)
    }
  }

  return (
    <div className="parking-system">
      <ParkingMap
        ref={canvasRef}
        slots={slots}
        guides={guides}
        drawingMode={drawingMode}
        startPos={startPos}
        onClick={handleCanvasClick}
      />
      <ControlPanel
        guides={guides}
        drawingMode={drawingMode}
        onClear={() => setGuides([])}
      />
    </div>
  )
}
